<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: huangrulan
  Date: 2019/3/6
  Time: 1:39 PM
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>场次信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="Author" content="larry"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="${base}/assets/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="${base}/assets/css/layui/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/assets/css/larryms/larryms.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/admin.css" media="all">
    <link rel="stylesheet" type="text/css" href="${base}/larryms/css/admin/article.css" media="all">
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            background: #ffffff;
            overflow: auto;
        }

        .layui-input-block {
            margin-left: 140px;
            min-height: 36px;
        }

        .layui-table-view .layui-form-checkbox, .layui-table-view .layui-form-radio, .layui-table-view .layui-form-switch {
            top: 0;
            margin: 15px;
            box-sizing: content-box;
        }
    </style>
</head>
<body class="larryms-system article" style="background-color: #ffffff;">
<div class="layui-fluid larryms-article">
    <div class="layui-tab-content larryms-panel-body">
        <fieldset class="layui-elem-field layui-field-title">
            <legend><c:if test="${flag == 1}">新增场次</c:if></legend>
            <legend><c:if test="${flag == 2}">编辑场次</c:if></legend>
            <legend><c:if test="${flag == 3}">影片场次</c:if></legend>
            <div class="layui-field-box">
                <form id="userForm" class="layui-form"
                      action="${base}/ticket/schedule/save.json" enctype="multipart/form-data" method="post">

                    <input type="hidden" name="id" value="${schedule.id}">

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red">* </font>强制设置时间</label>
                        <div class="layui-input-block">
                            <c:if test="${flag == 1}">
                                <input type="checkbox" name="timeFlag" lay-skin="switch" lay-text="开启|关闭"
                                       lay-filter="timeFlag">
                            </c:if>
                        </div>
                    </div>

                    <div class="layui-form-item" id="timeDiv" <c:if test="${flag == 1}">style="display: none;"</c:if>>
                        <label class="layui-form-label"><font color="red">* </font>上映时间</label>
                        <div class="layui-input-block">
                            <input type="text" id="schedule-time" value="${schedule.scheduleTime}"
                                   <c:if test="${flag == 3}">disabled</c:if> style="width: 50%;"
                                   class="layui-input larry-input" autocomplete="off" lay-verify=""
                                   placeholder="请选择放映时间">
                            <input type="hidden" name="scheduleTime" value="${schedule.scheduleTime}">
                            <input type="hidden" name="startTime">
                            <input type="hidden" name="endTime">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red">* </font>选择影片</label>
                        <div class="layui-input-block">
                            <input type="text" name="filmName" id="filmName" value="${schedule.title}"
                                   <c:if test="${flag == 3}">disabled</c:if>
                                   class="layui-input larry-input" autocomplete="off" style="width: 50%;"
                                   lay-verify="required">
                            <div id="filmTime" style="margin-top: 5px; color: #009588;">
                                <c:if test="${flag == 2 || flag == 3}">
                                    电影时长：${schedule.duration}分钟
                                </c:if>
                            </div>
                        </div>
                        <input type="hidden" name="filmId">
                        <input type="hidden" name="duration">
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red">* </font>输入价格</label>
                        <div class="layui-input-block">
                            <input type="text" name="price" value="${schedule.price}"
                                   <c:if test="${flag == 3}">disabled</c:if>
                                   class="layui-input larry-input" autocomplete="off" style="width: 50%;"
                                   lay-verify="required">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label"><font color="red">* </font>厅号</label>
                        <div class="layui-input-inline">
                            <c:if test="${flag != 3}">
                                <select name="place" lay-verify="required">
                                    <option>-请选择-</option>
                                    <option value="1" <c:if test="${schedule.place == 1}">selected</c:if>>1号厅</option>
                                    <option value="2" <c:if test="${schedule.place == 2}">selected</c:if>>2号厅</option>
                                    <option value="3" <c:if test="${schedule.place == 3}">selected</c:if>>3号厅</option>
                                    <option value="4" <c:if test="${schedule.place == 4}">selected</c:if>>4号厅</option>
                                    <option value="5" <c:if test="${schedule.place == 5}">selected</c:if>>5号厅</option>
                                    <option value="6" <c:if test="${schedule.place == 6}">selected</c:if>>6号厅</option>
                                </select>
                            </c:if>
                            <c:if test="${flag == 3}">
                                <input type="text" name="place" value="${schedule.place}" disabled
                                       class="layui-input larry-input" autocomplete="off" style="width: 50%;"
                                       lay-verify="required">
                            </c:if>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea name="remark" class="layui-textarea larry-textarea"
                                      <c:if test="${flag == 3}">disabled</c:if>
                                      autocomplete="off">${schedule.remark}</textarea>
                        </div>
                    </div>

                    <div style="display: inline-block; width: 100%; text-align: center;<c:if
                            test="${flag == 3}">display: none;</c:if>">
                        <a class="layui-btn" lay-submit lay-filter="saveSchedule" id="submitAdd">确定</a>
                        <a class="layui-btn layui-btn-normal" id="resetAdd">重置</a>
                        <a class="layui-btn layui-btn-danger" id="closeAdd">关闭</a>
                    </div>
                </form>
            </div>
        </fieldset>
    </div>
</div>

<!-- 加载js文件-->
<script type="text/javascript" src="${base}/assets/js/layui/layui.js"></script>
<script type="text/javascript" src="${base}/assets/js/layui/tableSelect.js"></script>
<script type="text/javascript">
    layui.config({
        version: "2.0.8",
        base: '${base}/larryms/',  //实际使用时，建议改成绝对路径
        identified: 'merge',
        // mods: 'vip/',
        page: 'schedule',
        layertype: 2,
        rightMenu: true // false关闭，设置为custom时使用自定义，不使用默认menu
    }).extend({
        larry: 'js/base'
    }).use(['larry', 'form', 'layer', 'laydate', 'table'], function () {
        var $ = layui.$,
            larry = layui.larry, layer = layui.layer, form = layui.form, laydate = layui.laydate, table = layui.table,
            tableSelect = layui.tableSelect;
        var curIfr = parent.layer.getFrameIndex(window.name);
        $('#resetAdd').on('click', function () {
            $('#slideForm')[0].reset();
        });
        $('#closeAdd').on('click', function () {
            parent.layer.close(curIfr);
        });

        //日期时间选择器
        laydate.render({
            elem: '#schedule-time',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm:ss',
            range: "~",
            position: 'fixed',
            done: function (value, date, endDate) {
                console.log(value); //得到日期生成的值，如：2017-08-18
                var times = value.split("~");
                $("input[name=scheduleTime]").val(value);
                $("input[name=startTime]").val(times[0]);
                $("input[name=endTime]").val(times[1]);
            }
        });

        form.on('switch(timeFlag)', function (data) {
            console.log(data.elem.checked); //开关是否开启，true或者false
            if (data.elem.checked) {
                $("#timeDiv").show();
                $("input[name=scheduleTime]").attr("lay-verify", "required");
                $("input[name=timeFlag]").val(1);
            } else {
                $("#timeDiv").hide();
                $("#schedule-time").val("");
                $("input[name=scheduleTime]").val("");
                $("input[name=startTime]").val("");
                $("input[name=endTime]").val("");
                $("input[name=scheduleTime]").attr("lay-verify", "");
                $("input[name=timeFlag]").val(0);
            }
        });

        //单选
        tableSelect.render({
            elem: '#filmName',	//定义输入框input对象 必填
            checkedKey: 'filmId', //表格的唯一建值，非常重要，影响到选中状态 必填
            searchKey: 'keyword',	//搜索输入框的name值 默认keyword
            searchPlaceholder: '请输入电影名搜索',	//搜索输入框的提示文字 默认关键词搜索
            table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                url: '../film/filmSelect.json',
                method: 'get',
                cellMinWidth: 95,
                height: '200',
                page: true,
                limits: [10, 20, 30],
                limit: 10,
                cols: [
                    [{
                        type: 'radio',
                        width: 80,
                        align: 'center',
                    }, {
                        field: 'title',
                        title: '名称',
                        minWidth: 200,
                        align: 'center',
                    }, {
                        field: 'duration',
                        title: '时长',
                        minWidth: 200,
                        align: 'center',
                    }]
                ]
            },
            done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []
                //拿到data[]后 就按照业务需求做想做的事情啦~比如加个隐藏域放ID...
                layui.each(data.data, function (index, item) {
                    elem.val(item.title);
                    $('input[name=filmId]').val(item.id);
                    $('input[name=duration]').val(item.duration);
                    $('#filmTime').text('电影时长：' + item.duration + '分钟');
                });
            }
        });

        //提交表单
        form.on('submit(saveSchedule)', function (data) {
            console.log(data.field);
            //获取是否开启强制时间
            var flag = $("input[name=timeFlag]").val();
            if (flag === "1") {
                //校验场次5分钟
                var startTime = new Date($("input[name=startTime]").val());
                var endTime = new Date($("input[name=endTime]").val());
                //console.log(endTime + "----" +startTime);
                var duration = $("input[name=duration]").val() * 60 * 1000;
                if (endTime.getTime() - startTime.getTime() - duration < 0) {
                    layer.msg("选择的场次时间小于影片时长，请重新选择", {icon: 5, time: 2000}, function () {
                    });
                } else {
                   // alert(endTime - startTime - duration);
                    if (endTime.getTime() - startTime.getTime() - duration <= 5 * 60 * 1000) {
                        $.ajax({
                            type: 'POST',
                            url: '${base}/ticket/schedule/save.json',
                            dataType: 'json',
                            data: data.field,
                            async: true,
                            success: function (res) {
                                console.log(res.success);
                                if (res.success) {
                                    layer.msg(res.data, {icon: 1, time: 1500}, function () {
                                        parent.layer.close(curIfr);
                                        parent.location.href = "schedule.page";
                                    });
                                } else {
                                    layer.msg(res.msg, {icon: 5, time: 2000}, function () {
                                        parent.layer.close(curIfr);
                                        location.reload();
                                    });
                                }
                            }, error: function () {
                                layer.msg("请求失败，请联系开发人员", {icon: 5, time: 2000}, function () {
                                    parent.layer.close(curIfr);
                                    location.reload();
                                });
                            }
                        });
                    } else {
                        layer.msg("选择的场次时间最长只可大与影片时长5分钟", {icon: 5, time: 2000}, function () {
                        });
                    }
                }
            } else {
                $.ajax({
                    type: 'POST',
                    url: '${base}/ticket/schedule/save.json',
                    dataType: 'json',
                    data: data.field,
                    async: true,
                    success: function (res) {
                        console.log(res.success);
                        if (res.success) {
                            layer.msg(res.data, {icon: 1, time: 1500}, function () {
                                parent.layer.close(curIfr);
                                parent.location.href = "schedule.page";
                            });
                        } else {
                            layer.msg(res.msg, {icon: 5, time: 2000}, function () {
                                parent.layer.close(curIfr);
                                location.reload();
                            });
                        }
                    }, error: function () {
                        layer.msg("请求失败，请联系开发人员", {icon: 5, time: 2000}, function () {
                            parent.layer.close(curIfr);
                            location.reload();
                        });
                    }
                });
            }
        });
    });
</script>
</body>
</html>
